<template>
<!-- 图表 -->
  <el-row :gutter="20" class="stat-cards">
      <el-col :span="6" v-for="(item, index) in statistics" :key="index">
        <el-card class="stat-card">
          <div class="stat-card-content">
            <div class="stat-icon">
              <el-icon>
                <component :is="item.icon"></component>
              </el-icon>
            </div>
<div class="stat-info">
              <div class="stat-value">{{ item.value }}</div>
              <div class="stat-label">{{ item.label }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  <!-- 添加图表区域 -->
  <el-row :gutter="20" class="chart-row">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>访问统计</span>
            </div>
          </template>
          <div ref="weeklyChart" style="height: 300px"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>用户来源分布</span>
            </div>
          </template>
          <div ref="pieChart" style="height: 300px"></div>
        </el-card>
      </el-col>
    </el-row>



  <div class="admin-home">
    <el-row :gutter="20">
      <!-- 系统概况 -->
      <el-col :span="24">
        <el-card class="overview-card">
          <template #header>
            <div class="card-header">
              <span>系统概况</span>
              <el-button type="primary" link @click="$router.push('/admin/system')">
                系统设置
              </el-button>
            </div>
          </template>
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="stat-item">
                <div class="stat-title">用户总数</div>
                <div class="stat-value">{{ stats.totalUsers }}</div>
                <div class="stat-footer">
                  较上月 
                  <span :class="stats.userGrowth >= 0 ? 'up' : 'down'">
                    {{ Math.abs(stats.userGrowth) }}%
                  </span>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="stat-item">
                <div class="stat-title">考试场次</div>
                <div class="stat-value">{{ stats.totalExams }}</div>
                <div class="stat-footer">
                  进行中 {{ stats.activeExams }} 场
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="stat-item">
                <div class="stat-title">系统负载</div>
                <div class="stat-value">{{ stats.systemLoad }}%</div>
                <div class="stat-footer">
                  {{ stats.systemLoad < 80 ? '运行正常' : '负载较高' }}
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="stat-item">
                <div class="stat-title">在线用户</div>
                <div class="stat-value">{{ stats.onlineUsers }}</div>
                <div class="stat-footer">
                  峰值 {{ stats.peakUsers }} 人
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>

      <!-- 用户分析 -->
      <el-col :span="12" style="margin-top: 20px;">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>用户分析</span>
              <el-button type="primary" >
                用户管理
              </el-button>
            </div>
          </template>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="user-type">
                <div class="type-label">学生</div>
                <div class="type-value">{{ userStats.students }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="user-type">
                <div class="type-label">教师</div>
                <div class="type-value">{{ userStats.teachers }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="user-type">
                <div class="type-label">管理员</div>
                <div class="type-value">{{ userStats.admins }}</div>
              </div>
            </el-col>
          </el-row>
          <div class="recent-users">
            <h4>最近注册</h4>
            <el-table :data="recentUsers" style="width: 100%">
              <el-table-column prop="name" label="用户名" width="120" />
              <el-table-column prop="role" label="角色" width="100">
                <template #default="scope">
                  <el-tag :type="getRoleType(scope.row.role)">
                    {{ roleMap[scope.row.role] }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="registerTime" label="注册时间" />
            </el-table>
          </div>
        </el-card>
      </el-col>

      <!-- 系统状态 -->
      <el-col :span="12" style="margin-top: 20px;">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>系统状态</span>
              <el-button type="primary" link @click="$router.push('/admin/logs')">
                系统日志
              </el-button>
            </div>
          </template>
          <div class="system-status">
            <div class="status-item">
              <span class="label">CPU使用率</span>
              <el-progress
                :percentage="systemStatus.cpu"
                :status="systemStatus.cpu > 80 ? 'exception' : ''"
              />
            </div>
            <div class="status-item">
              <span class="label">内存使用率</span>
              <el-progress
                :percentage="systemStatus.memory"
                :status="systemStatus.memory > 80 ? 'exception' : ''"
              />
            </div>
            <div class="status-item">
              <span class="label">磁盘使用率</span>
              <el-progress
                :percentage="systemStatus.disk"
                :status="systemStatus.disk > 80 ? 'exception' : ''"
              />
            </div>
          </div>
          <div class="recent-logs">
            <h4>最近日志</h4>
            <el-timeline>
              <el-timeline-item
                v-for="log in recentLogs"
                :key="log.id"
                :type="log.type"
                :timestamp="log.time"
              >
                {{ log.content }}
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts'

const router = useRouter()

// 系统统计数据
const stats = reactive({
  totalUsers: 1250,
  userGrowth: 5.2,
  totalExams: 156,
  activeExams: 3,
  systemLoad: 45,
  onlineUsers: 128,
  peakUsers: 256
})

// 用户统计
const userStats = reactive({
  students: 1000,
  teachers: 45,
  admins: 5
})

// 角色映射
const roleMap = {
  admin: '管理员',
  teacher: '教师',
  student: '学生'
}

// 最近注册用户
const recentUsers = ref([
  {
    name: '张三',
    role: 'student',
    registerTime: '2024-04-01 10:00:00'
  },
  {
    name: '李四',
    role: 'teacher',
    registerTime: '2024-04-01 09:30:00'
  }
])

// 系统状态
const systemStatus = reactive({
  cpu: 35,
  memory: 45,
  disk: 60
})

// 最近日志
const recentLogs = ref([
  {
    id: 1,
    type: 'success',
    time: '2024-04-01 10:00:00',
    content: '系统备份完成'
  },
  {
    id: 2,
    type: 'warning',
    time: '2024-04-01 09:30:00',
    content: '新用户注册：teacher001'
  }
])

const getRoleType = (role) => {
  const typeMap = {
    admin: 'danger',
    teacher: 'warning',
    student: 'success'
  }
  return typeMap[role]
}

const weeklyChart = ref(null)
const pieChart = ref(null)

const statistics = ref([
  { label: '总用户数', value: '1,234', icon: 'User' },
  { label: '今日访问', value: '423', icon: 'View' },
  { label: '总文章数', value: '56', icon: 'Document' },
  { label: '评论数', value: '89', icon: 'ChatDotRound' }
])

onMounted(() => {
  // 初始化折线图
  const lineChart = echarts.init(weeklyChart.value)
  lineChart.setOption({
    title: { text: '周访问统计' },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: { type: 'value' },
    series: [{
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'line'
    }]
  })

  // 初始化饼图
  const pChart = echarts.init(pieChart.value)
  pChart.setOption({
    title: { text: '用户分布' },
    series: [{
      type: 'pie',
      data: [
        { value: 335, name: '直接访问' },
        { value: 234, name: '社交媒体' },
        { value: 158, name: '搜索引擎' }
      ]
    }]
  })
})
</script>

<style scoped>
.admin-home {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-item {
  text-align: center;
  padding: 20px;
}

.stat-title {
  font-size: 14px;
  color: #909399;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  margin: 10px 0;
}

.stat-footer {
  font-size: 12px;
  color: #909399;
}

.up {
  color: #67C23A;
}

.down {
  color: #F56C6C;
}

.user-type {
  text-align: center;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.type-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 10px;
}

.type-value {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
}

.recent-users {
  margin-top: 20px;
}

.recent-users h4,
.recent-logs h4 {
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #EBEEF5;
}

.system-status {
  margin-bottom: 20px;
}

.status-item {
  margin-bottom: 15px;
}

.status-item .label {
  display: block;
  margin-bottom: 5px;
}
.stat-cards {
  margin-bottom: 20px;
}

.stat-card {
  height: 100%;
}

.stat-card-content {
  display: flex;
  align-items: center;
  padding: 10px;
}

.stat-icon {
  font-size: 24px;
  color: #409EFF;
  margin-right: 15px;
}

.stat-info {
  flex: 1;
}

.stat-info .stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.stat-info .stat-label {
  font-size: 14px;
  color: #909399;
}

.chart-row {
  margin-bottom: 20px;
}
</style> 